<template>
  <div>
    <el-card class="box-card" style="margin-bottom:10px;position:relative;">
      <el-tabs value="server" @tab-click="actionTabChanged">
        <el-tab-pane label="服务器状态" name="server">
          <el-table :data="serverStatusFiltered" height="600">
            <el-table-column prop="Variable_name">
              <template slot="header" slot-scope="scope">
                <el-input v-model="serverStatusItemSearchText" size="mini" placeholder="过滤项目" :data-scope="scope"/>
              </template>
            </el-table-column>
            <el-table-column prop="Value" label="取值"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="系统变量" name="variables">
          <el-table :data="serverVariablesFiltered" height="600">
            <el-table-column prop="Variable_name">
              <template slot="header" slot-scope="scope">
                <el-input v-model="variableItemSearchText" size="mini" placeholder="过滤项目" :data-scope="scope"/>
              </template>
            </el-table-column>
            <el-table-column prop="Value" label="取值"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="执行状态" name="process">
          <el-table :data="processes" height="600">
            <el-table-column prop="Id" label="Id" width="50"></el-table-column>
            <el-table-column prop="State" label="State" width="200"></el-table-column>
            <el-table-column prop="Host" label="Host" width="200"></el-table-column>
            <el-table-column prop="User" label="User" width="200"></el-table-column>
            <el-table-column prop="db" label="db"></el-table-column>
            <el-table-column prop="Time" label="Time" width="80"></el-table-column>
            <el-table-column prop="Command" label="Command" width="200"></el-table-column>
            <el-table-column prop="Info" label="Info" width="500"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" @click="actionProcessKill(scope.row.Id)">结束</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import Common from '../../utils/Common.js'
import MysqlConnection from './MysqlConnection.js'
export default {
    name : 'MysqlServerStatus',
    data() {
        return {
            connection : null,
            processes : [],
            serverStatus : [],
            serverStatusItemSearchText : '',
            variables : [],
            variableItemSearchText : '',
        };
    },
    computed : {
        // 过滤服务器状态
        serverStatusFiltered() {
            if ( Common.isVarEmpty(this.serverStatusItemSearchText) ) {
                return this.serverStatus;
            }

            let list = [];
            for ( let i=0; i<this.serverStatus.length; i++ ) {
                let key = this.serverStatus[i]['Variable_name'].toLowerCase();
                if ( -1 != key.indexOf(this.serverStatusItemSearchText.toLowerCase()) ) {
                    list.push(this.serverStatus[i]);
                }
            }
            return list;
        },
        // 过滤服务器变量
        serverVariablesFiltered() {
            if ( Common.isVarEmpty(this.variableItemSearchText) ) {
                return this.variables;
            }

            let list = [];
            for ( let i=0; i<this.variables.length; i++ ) {
                let key = this.variables[i]['Variable_name'].toLowerCase();
                if ( -1 != key.indexOf(this.variableItemSearchText.toLowerCase()) ) {
                    list.push(this.variables[i]);
                }
            }
            return list;
        },
    },
    async mounted() {
        await this.connectToDatabase();
        await this.refreshServerStatus();
    },
    methods : {
        // tab 切换
        actionTabChanged( tab ) {
            if ( 'process' == tab.name ) {
                this.refreshProcessList();
            } else if ( 'server' == tab.name ) {
                this.refreshServerStatus();
            } else if ( 'variables' == tab.name ) {
                this.refreshVariables();
            }
        },
        
        // 查询服务器状态
        async refreshServerStatus() {
            let list = await this.connection.execute('SHOW STATUS');
            this.serverStatus = list;
        },

        // 查询服务器变量
        async refreshVariables() {
            let list = await this.connection.execute('SHOW VARIABLES');
            this.variables = list;
        },

        // 查询执行状态
        async refreshProcessList() {
            let list = await this.connection.execute('SHOW FULL PROCESSLIST');
            this.processes = list;
        },

        // 连接到数据库
        async connectToDatabase() {
            let server = this.$store.getters.serverCurrent;
            let config = await server.getConfiguration('mysql');
            if ( null == config ) {
                this.isMysqlAvailable = false;
                return;
            }

            this.connection = new MysqlConnection({
                host     : config.host,
                user     : config.user,
                password : config.password,
                database : config.database
            });
        },

        // 结束查询
        async actionProcessKill(id) {
            try {
                await this.$confirm('此操作将结束该查询, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
            } catch {
                return;
            }
            
            try {
                await this.connection.execute(`KILL ${id}`);
                await this.refreshProcessList();
            } catch ( e ) {
                this.$message.error(e.message);
                return;
            }
        },
    }
}
</script>